<template>
    <div
        :class="[
            'lg-message', { [type]: type },
        ]"
        v-show="visible"
        :style="`top: ${top}px;z-index: ${zIndex};${centerStyle()};${customColorTransition()}`"
    >
        <i :class="['iconfont', getStatusIcon()]"></i>
        <span ref="VNodeRefs" v-if="message && typeof message == 'object'">{{ message }}</span>
        <span v-else-if="!dangerouslyUseHTMLString">{{ message }}</span>
        <span v-else v-html="message">{{ message }}</span>
    </div>
</template>

<script>
import { toLine, conversion } from '@/libs/index.js'
export default {
    name: 'lgMessage',
    data() {
        return {
            message: '',
            type: '',
            visible: false,
            styleTop: 0,
            top: -80,
            zIndex: 2001,
            dangerouslyUseHTMLString: false,
            center: false,
            iconClass: '',
            customColor: null
        }
    },
    watch: {
        visible(newVal) {
            if (!newVal) {
                this.$nextTick(() => {
                    this.handleAfterLeave()
                })
            } else {
                    if (this.message && typeof this.message == 'object') {
                        this.__patch__(this.$refs.VNodeRefs, this.message, false, true) 
                    }
            }
        }
    },
    methods: {
        centerStyle(type) {
           if (type == 'text') {
              return this.center && 'text-align: center;' || ''
           } else {
              return this.center && 'justify-content: center;' || ''
           }
        },
        customColorTransition() {
            if (typeof this.customColor != 'object' || typeof this.customColor == 'object' && Object.keys(this.customColor).length == 0) return ''
            if (typeof this.customColor == 'object' && Object.keys(this.customColor).length){
                let styleString = ''
                for(let key in this.customColor){
                    if(key == 'lineHeight' && toLine(key) == 'line-height' && this.customColor[key] == 1) {   // 排除line-height: 1 这种情况
                        styleString += `${toLine(key)}:${this.customColor[key]};`
                    } else if(key != 'iconClass') {
                        styleString += `${toLine(key)}:${conversion(this.customColor[key])};`
                    }
                }
                return styleString
            }
        },
        messageStatus(status, zIndex, messageIndex) {
            if (!status) {
                this.top = -80
                setTimeout(() => {
                    this.visible = status
                }, 800)
            } else {
                this.zIndex = Number(zIndex) + 1
                this.getTop(messageIndex)
                this.visible = status
                setTimeout(() => {
                    this.top = this.styleTop
                }, 1)
            }

        },
        getTop(messageIndex) {
            this.top = Number(messageIndex) > 0 ? Number(messageIndex) * 64 - 45 : -80
        },
        handleAfterLeave() {
            this.$destroy(true)
            this.$el.parentNode.removeChild(this.$el)
        },
        getStatusIcon(){
            let type = 'info'
            switch(this.type) {
                case 'info':
                    type = 'info'
                break;
                case 'warning':
                    type = 'warning'
                break;
                case 'error':
                    type = 'error'
                break;
                default:
                    type = 'success'
                break;
            }
            if (this.customColor && typeof this.customColor == 'object' && Object.keys(this.customColor).length && this.customColor.iconClass && typeof this.customColor.iconClass == 'string') {
                return this.customColor.iconClass.includes('icon-') ? this.customColor.iconClass: `icon-${this.customColor.iconClass}`
            }
            return `icon-${type}`
        },
    },
}
</script>

<style scoped lang="less">
.lg-message {
    position: fixed;
    width: 380px;
    left: 50%;
    color: #fff;
    padding: 15px 15px 15px 20px;
    font-size: 14px;
    border-radius: 4px;
    top: -80px;
    transform: translateX(-50%);
    background: #fff;
    color: #909399;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: top 0.4s;
    &.success{
        background: mix(#ffffff, #67C23A, 90%);
        color: #67C23A;
    }
    &.warning{
        background: mix(#ffffff, #E6A23C, 90%);
        color: #E6A23C;
    }
    &.error{
        background: mix(#ffffff, #F56C6C, 90%);
        color: #F56C6C;
    }
    &.info{
        background: mix(#ffffff, #909399, 90%);
        color: #909399;
    }
    i {
        margin-right: 8px;
        font-size: 18px;
    }
    span{
        flex: 1;
    }
}
</style>